<template>
  <div class="trend base-section">
    <!-- 标题 -->
    <div class="base-section__header">
      <h3 class="base-section__header-title">{{$t('dataAnalysis.flowTrend')}}</h3>
    </div>
    <!-- 标题 -->

    <!-- 单项选择 -->
    <div class="radio base-section">
      <div class="radio-wrapper">
        <div class="visit-group">
          <div class="visit-group__title">{{$t('dataAnalysis.pageBrowsing')}}</div>
          <div class="visit-group__content">
            <el-radio-group v-model="typeValue">
              <el-radio class="radio-item" :label="1">{{$t('dataAnalysis.numberOfVisitors')}}</el-radio>
              <el-radio class="radio-item" :label="2">{{$t('dataAnalysis.newVisitor')}}</el-radio>
              <el-radio class="radio-item" :label="3">{{$t('dataAnalysis.pageviews')}}</el-radio>
              <el-radio class="radio-item" :label="4">{{$t('dataAnalysis.stayTime')}}</el-radio>
              <el-radio class="radio-item" :label="5">{{$t('dataAnalysis.perVisits')}}</el-radio>
              <el-radio class="radio-item" :label="6">{{$t('dataAnalysis.lossRate')}}</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="visit-group">
          <div class="visit-group__title">{{$t('dataAnalysis.transactionConversion')}}</div>
          <div class="visit-group__content">
            <el-radio-group v-model="typeValue">
              <el-radio class="radio-item" :label="7">{{$t('dataAnalysis.paidNumbers')}}</el-radio>
              <el-radio class="radio-item" :label="8">{{$t('dataAnalysis.vToP')}}</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
    <!-- 单项选择 -->

    <!-- 选择显示不同端的数据 -->
    <div class="plat">
      <el-radio-group v-model="systemType" size="small" @change="systemTypeChange">
        <el-radio-button :label="0">{{$t('date.a')}}</el-radio-button>
        <el-radio-button :label="1">PC</el-radio-button>
        <el-radio-button :label="2">H5</el-radio-button>
        <el-radio-button :label="3">{{$t('sysManagement.miniPrograms')}}</el-radio-button>
        <el-radio-button :label="4">{{$t('dataAnalysis.android')}}</el-radio-button>
        <el-radio-button :label="5">IOS</el-radio-button>
      </el-radio-group>
    </div>
    <!-- /选择显示不同端的数据 -->

    <!-- 图表 -->
    <div class="chart">
      <div id="i-chart" style="width:100%;height:300px;"></div>
    </div>
    <!-- /图表 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      typeValue: 1, // 默认单项选择为第一项
      platValue: 0, // 选择不同端的数据
      flowTrendData: [], // 流量趋势数据
      dataArray: [], // Echart显示具体数据
      timeArray: [], // Echart X轴下方显示的具体时间
      // formatter: '{b}<br />{a}: {c0}', // Echart每个点显示的格式
      eChartTitleArray: [], // Echart图列表
      currEchartTitle: '',  // 当前Echart的名字
      timeType: this.$parent.timeType,
      startTime: this.$parent.startTime,
      systemType: 0
    }
  },
  watch: {
    startTime (val) {
      this.getFlowTrendData()
    },
    platValue (val) {

    },
    typeValue (flowType) {
      this.switchEchart(flowType)
    },
    systemType (val) {
      this.systemType = val
      this.getFlowTrendData()
    }
  },
  mounted () {
    this.getFlowTrendData()
  },
  methods: {
    // 切换趋势图实时改变
    switchEchart (flowType) {
      this.dataArray = []
      this.currEchartTitle = this.eChartTitleArray[flowType - 1]
      switch (flowType) {
        case 1:
          for (let i = 0; i < this.flowTrendData.length; i++) {
            this.dataArray.push(this.flowTrendData[i].userNums)
          }
          break
        case 2:
          for (let i = 0; i < this.flowTrendData.length; i++) {
            this.dataArray.push(this.flowTrendData[i].newUser)
          }
          break
        case 3:
          for (let i = 0; i < this.flowTrendData.length; i++) {
            this.dataArray.push(this.flowTrendData[i].visitNums)
          }
          break
        case 4:
          for (let i = 0; i < this.flowTrendData.length; i++) {
            this.dataArray.push(this.flowTrendData[i].averageStopTime)
          }
          break
        case 5:
          for (let i = 0; i < this.flowTrendData.length; i++) {
            this.dataArray.push(this.flowTrendData[i].averageVisitNums)
          }
          break
        case 6:
          for (let i = 0; i < this.flowTrendData.length; i++) {
            this.dataArray.push(this.flowTrendData[i].lossUserRate)
          }
          break
        case 7:
          for (let i = 0; i < this.flowTrendData.length; i++) {
            this.dataArray.push(this.flowTrendData[i].payUser)
          }
          break
        case 8:
          for (let i = 0; i < this.flowTrendData.length; i++) {
            this.dataArray.push(this.flowTrendData[i].payRate)
          }
          break
        default:
          for (let i = 0; i < this.flowTrendData.length; i++) {
            this.dataArray.push(this.flowTrendData[i].userNums)
          }
          break
      }
      this.getOneEchart()
    },
    // 获取趋势图相关数据
    getFlowTrendData () {
      // 遍历Echart标题名
      var ele = document.getElementsByClassName('radio-item')
      for (var j = 0, len = ele.length; j < len; j++) {
        this.eChartTitleArray.push(ele[j].innerText)
      }
      // 默认第一个(访客数)
      this.currEchartTitle = this.eChartTitleArray[0]
      // 请求接口
      // console.log('第二部分发送请求')
      this.$http({
        url: this.$http.adornUrl('/platform/flowAnalysis/flowTrend'),
        method: 'get',
        params: this.$http.adornParams({
          timeType: this.timeType,
          start: !this.startTime ? null : this.startTime,
          systemType: this.systemType
        })
      }).then(({ data }) => {
        if (data) {
          this.flowTrendData = []
          this.timeArray = []
          this.dataArray = []
          for (let i = 0; i < data.length; i++) {
            this.flowTrendData.push(data[i])
            this.timeArray.push(data[i].dateTime)
          }
          this.switchEchart(this.typeValue)
        }
      })
    },
    systemTypeChange () {
      this.$parent.systemType = this.systemType
      this.getFlowTrendData()
      this.switchEchart(this.typeValue)
    },
    // 获取第一部分Echart数据图
    getOneEchart () {
      const myChart = this.$echarts.init(document.getElementById('i-chart'))
      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'          // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.eChartTitleArray
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.timeArray,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: ''
          }
        ],
        series: [
          {
            name: this.currEchartTitle,
            type: 'line',
            data: this.dataArray
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss">
.trend {
  /* 单项选择 */
  .radio {
    background-color: #fff;
    margin-bottom: 24px;
  }

  .visit-group {
    display: flex;
    align-items: flex-start;
  }

  .visit-group .visit-group__title {
    font-size: 14px;
  }

  .visit-group__content {
    flex: 1;
  }

  .visit-group__content .radio-item {
    display: inline-block;
    width: 152px;
    cursor: pointer;
    margin-right: 15px;
    margin-bottom: 16px;
  }

  /* /单项选择 */

  /* 平台选择 */
  .plat {
    margin-bottom: 24px;
  }

  /* /平台选择 */

  /* 图表 */
  .chart {
    padding: 10px;
  }

  /* /图表 */
}
</style>

